<style>
	.form-jiesuan-sj{
		margin-bottom: 50px;
	}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
{include file="system@block/layui" /}


<div id="box">
<span style="font-size: 22px;margin-left: 50px">订单编号：{{sn}}</span>
<span style="font-size: 22px;margin-left: 50px">会员：{{user}}</span>
<span style="font-size: 22px;margin-left: 50px">房间：{{room}}</span><br>

<br>

	<el-form ref="beizhu" :model="beizhu" label-width="80px"  :inline="true" class="form-jiesuan-sj">
   <el-form-item label="收银备注">
  <el-input
	type="textarea"
	:rows="2"
	placeholder="请输入内容"
	v-model="beizhu.remarks">
  </el-input>
  </el-form-item>
   <el-form-item label="皮肤现状">
  <el-input
	type="textarea"
	:rows="2"
	placeholder="请输入内容"
	v-model="beizhu.skin_text">
  </el-input>
  </el-form-item>
   <el-form-item label="需要解决的问题">
  <el-input
	type="textarea"
	:rows="2"
	placeholder="请输入内容"
	v-model="beizhu.problem">
  </el-input>
  </el-form-item>
   <el-form-item label="操作注意细节">
  <el-input
	type="textarea"
	:rows="2"
	placeholder="请输入内容"
	v-model="beizhu.operate_detail">
  </el-input>
  </el-form-item>
   <el-form-item label="建议居家用品">
  <el-input
	type="textarea"
	:rows="2"
	placeholder="请输入内容"
	v-model="beizhu.sug_goods">
  </el-input>
  </el-form-item>
</el-form>
 


<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="产品名称"
      width="180">
      <template slot-scope="scope">
      		<el-select v-model="scope.row.product_id" filterable  @change="proSelect(scope.$index)" placeholder="请选择产品">
			      <el-option v-for="item,idx in products" :label="item.name" :value="item.id" :key="idx"></el-option>
		    </el-select>
	  </template>
    </el-table-column>
	<el-table-column
      label="项目 * 数量">
      <template slot-scope="scope">
		<el-select v-model="scope.row.project_id" filterable size="mini" placeholder="请选择项目">
			<el-option v-for="item,idx in project_data" :label="item.project_name" :value="item.project_id" :key="idx">{{item.project_name}} * {{item.num}}</el-option>
	  </el-select>
	   <!-- {{scope.row.project_name}} * {{scope.row.project_num}}  * item.num -->
	  </template>
    </el-table-column>

    <el-table-column
      label="产品数量">
      <template slot-scope="scope">
	   <el-input v-model="scope.row.product_num"></el-input>
	  </template>
    </el-table-column>
    <el-table-column
      label="单位">
        <template slot-scope="scope">
        {{scope.row.unit_text}} / {{scope.row.decomposition_text}}
		<span v-if="scope.row.is_volume == 1">分解使用</span>
		<span v-if="scope.row.is_volume == 2">不分解使用</span>
	  </template>
    </el-table-column>

   <el-table-column
      label="仓库"
      width="180">
      <template slot-scope="scope">
      		<el-select v-model="scope.row.warehouse_id" filterable placeholder="请选择仓库">
			      <el-option v-for="item,idx in warehouses" :label="item.name" :value="item.id" :key="item.id"></el-option>
		    </el-select>
	  </template>
    </el-table-column> 
    <el-table-column
	  label="操作"
	  width="180">
      <template slot-scope="scope">
	   <el-button @click.prevent="addItem(scope.row)">新增</el-button>
	   <el-button @click.prevent="removeItem(scope.$index)">删除</el-button>
	  </template>
    </el-table-column>

  </el-table>
  <el-form ref="form" :model="form" label-width="80px"  :inline="true" class="form-jiesuan-sj">

  <el-form-item label="库管">
     <el-select v-model="form.warehouse_admin" placeholder="请选择库管" >
      <el-option v-for="item,idx in warehouse_admins" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit(2)">收银结算</el-button>
	<el-button type="primary" @click="onSubmit(0)">上一步</el-button>
	<el-button @click.prevent="addProduct">增加</el-button>
    <!-- <el-button>取消</el-button> -->
  </el-form-item>
  </el-form>
</div>

<script>
var vm = new Vue({
	el:"#box",
	data:{
		beizhu:{
			remarks: "{$formData['remarks']}",
            skin_text:'{$formData['skin_text']}',
            problem:'{$formData['problem']}',
            operate_detail:'{$formData['operate_detail']}',
            sug_goods:'{$formData['sug_goods']}',
		},
		form:{
			id:{$formData.id},
			warehouse_admin: '',
		},
		sn:'{$formData['sn']}',
		user:'',
		user_id:{$formData.user_id},
		room:'',
		room_id:{$formData.room_id},
		tableData:[],
		users:{:json_encode($users)},
		rooms:{:json_encode($rooms)},
		warehouses:{:json_encode($warehouses)},
		products:{:json_encode($products)},
		project_data:{:json_encode($project_data)},
		warehouse_admins:{:json_encode($warehouse_admins)},
	},
	created (){
		for(var i = 0; i < this.users.length;i++){
			if(this.user_id === this.users[i].id){
				this.user = this.users[i].nick;
			}
		}
		for(var i = 0; i < this.rooms.length;i++){
			if(this.room_id === this.rooms[i].id){
				this.room = this.rooms[i].name;
			}
		}
		for(var i = 0; i < this.project_data.length; i++){
			for(var k = 0;k < this.project_data[i].product.length;k++){
				// console.log(this.project_data[i].product[k])
				this.tableData.push({
					product_id: this.project_data[i].product[k].product_id,
					project_id: this.project_data[i].project_id,
					product_name: this.project_data[i].product[k].name,
					project_name: this.project_data[i].project_name,
					project_num: Number(this.project_data[i].num),
					product_num: this.project_data[i].product[k].category_number * Number(this.project_data[i].num),
					unit_text: this.project_data[i].product[k].unit_text,
					decomposition_text: this.project_data[i].product[k].decomposition_text,
					is_volume: this.project_data[i].product[k].is_volume,
					warehouse_id:this.warehouses[0].id
				});
			}
		}
		console.log(this.tableData);

	},
	methods:{
		onSubmit:function(status = 2){
            var params = this.form;
            params.product_data = this.tableData;
            params.status = status;
			
            var that = this;
                axios.post('{:url('')}', params).then(function (response) {
                    if(response.data.status === true){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        that.$message({
                            type: 'success',
                            message: response.data.message,
                            onClose: function(){
                                parent.layer.close(index); //再执行关闭
                                window.parent.location.reload();
                            }
                        })
                    }else{
                        that.$message({
                            type: 'error',
                            message: response.data.message
                        })
                    }
                }).catch(function (error) {
                    that.$message({
                            type: 'error',
                            message: error
                        })
                });
        },
		addProduct:function(){
			var products = this.products[0]
			var project_data = this.project_data[0]
			this.tableData.push({
				product_id: products.product_id,
				project_name: project_data.project_name,
				project_num: Number(project_data.num),
				product_num: products.product_num,
				unit_text: products.unit_text,
				decomposition_text: products.decomposition_text,
				is_volume: 1,
			})
		},
		addItem:function(row){

			this.tableData.push({
				product_id: row.product_id,
				project_name: row.project_name,
				project_num: Number(row.project_num),
				product_num: row.product_num,
				unit_text: row.unit_text,
				decomposition_text: row.decomposition_text,
				is_volume: row.is_volume,
			});
		},
		removeItem:function(idx){

            this.tableData.splice(idx,1);
        },
		proSelect:function(idx){
			var that = this;

		    let row = that.products.filter(function(p){
			     return p.id === that.tableData[idx].product_id;
			 })[0]
		    console.log(row);
	       Object.keys(row).map(key => {

	          if (key !== 'product_id' && key !== 'product_num') {
	            that.$set(that.tableData[idx], key, row[key])
	          }

	        })

		},
	},
})
</script>
